<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      .list {
        display: flex;

        height: 500px;
        background: #aaa;

        /* justify-content:定义主轴排列对齐方式 */
        /* justify-content: flex-start; 起始端对齐(默认) */
        /* justify-content: flex-end;  末尾端对齐 */
        /* justify-content: center;  主轴居中对齐 */
        /* justify-content: space-around;  子容器沿主轴均匀分布，位于首尾两端的子容器到父容器两端容器的距离是子容器之间的一般 */
        /* justify-content: space-between;   子容器均匀分布，位于首位两端的子容器与父容器相切 */

        /* flex-wrap: 如何换行; */
        /* flex-wrap: nowrap; 超出不换行，子容器会缩小 */
        /* flex-wrap: wrap; 超出换行 */
        /* flex-wrap: wrap-reverse;    反向换行 */

        /* align-items: 定义沿着交叉轴的子容器间距; */
        /* align-items: flex-start;   沿着交叉轴起始端对齐 */
        /* align-items: flex-end;   沿着交叉轴末尾端对齐 */
        /* align-items: center;   沿着交叉轴居中对齐 */
        /* align-items: baseline;   沿着基线（）对齐 */
        /* align-items: stretch; 在交叉轴方向上的子容器高度拉伸至和父容器一样高 */

        /* flex-direction:设置弹性容器的主轴方向 */
        /* flex-direction: row; X轴 */
        /* flex-direction: column; Y轴 */
        /* flex-direction: row-reverse; 起始端方向反转 *-reverse */
      }
      .item {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;

        /* flex：在主轴上如何伸缩 */
        /* flex:1 1比1继承 */

        /* align-self: ; */
        /* align-self: flex-end;  单独设置子容器在主轴排列的方式 */
      }
      .item:nth-child(3) {
        /* order: -1; 调整弹性子容器顺序，越小越靠前 */
      }
      .item:nth-child(2n) {
        background: lightgoldenrodyellow;
      }
      .item:nth-child(2n-1) {
        background: lightskyblue;
        height: 200px;
      }
      /* .test{
        position: absolute;
        top: 100px;
      } */
    </style>
  </head>
  <body>
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <!-- <div class="test">111</div> -->
    </div>
  </body>
</html>
